<template>
    <div class="circ">
        <img class="bg1" src="~static/img/circulation/bg_content.png" alt="">
        <div class="container">
            <div class="topText">
                <p>
                    TA-App创造性的提出“P2P流通交易”的概念，TA所提出的流通交易的理念是以实际的使用为主，流通变现为辅的模式，但TA-App不会是一个交易所，因为TA认为所谓的交易所对数字经济的负面作用比正面作用更大。目前数字贷币所有的黑暗、贪婪、混沌均是由交易所引起的。表面上看它带来了流动，但实际上交易所已完全解耦了价值与商品之间的关系，脱离锚定，灵魂出窍。</p>
                <p>
                    尽管有很多邪恶的方法在吸干散户口袋里的钱，人们却又离不开交易系统，因为Token只有通过流通才能激发它的经济作用。去中心交易所迟迟没能够产生作用，并不是由于它的性能及用户体验的问题，而造成它不好用或人们不去使用，而是因为代码没有能力表达人性，代码更没有能力施以正义。</p>
                <p>TA的目标是使人们无障碍使用、流通交易Token，极尽可能的保护散户的利益，是TA的使命。</p>
                <p>我们需要解决以下三个问题：</p>
            </div>
            <div class="research">
                <div class="researchBox researchBox1">
                    <img src="~static/img/circulation/img_1.png" alt="">
                    <div class="researchCube">
                        <p class="title">空转攻击</p>
                        <p>
                            交易可以提高Token的价值，但并不是所有交易都是好的，保持微小的套利空间促进了流动性，但如果套利空间过大，实质上是一种Token攻击，因为它本身没有能力抵抗空转带来的负作用；那么它应被限制；因此TA将动态地取消、禁止、限制高频交易。</p>
                    </div>
                </div>
                <div class="researchBox researchBox2"><img src="~static/img/circulation/img_2.png" alt="">
                    <div class="researchCube">
                        <p class="title">博弈不对称攻击</p>
                        <p>交易必须处在博弈平衡之下，而不是处于操控之下；现行的所有交易所系统都可以通过信息不对称或资源不对称获取暴利，尽管TA目前的能力很小，但我们不会视而不见，我们希望能做点什么。</p>
                    </div>
                </div>
                <div class="researchBox researchBox3">
                    <img src="~static/img/circulation/img_3.png" alt="">
                    <div class="researchCube">
                        <p class="title">滑点攻击</p>
                        <p>交易必须是无滑点的，人们不应该跟机器人进行一场对敲的游戏。</p>
                    </div>
                </div>
            </div>

        </div>

    </div>
</template>

<script>
    import anime from '~/plugins/anime.js';
    export default {
        name: "circ",
        mounted() {

            this.ani();
        },
        methods: {
            ani(){
                window.onscroll = function () {
                    var topLong=$(document).scrollTop();
                    if(topLong>$(window).height()){
                        anime.a('.researchBox1');
                    }else if(($(window).height())<topLong<($(window).height()+310)){
                        anime.b('.researchBox2');
                    }else if(($(window).height()+310)<topLong<($(window).height()+620)){
                        anime.a('.researchBox3');
                    }
                }


                // console.log(a)
            }
        }
    }
</script>

<style scoped>
    .circ {width: 100%;height: 1490px;background-color: #271553;position: relative;}
    .circ .bg1 {width: 100%;position: absolute;bottom: 0;left: 0;}
    .topText {padding: 80px 100px 100px 100px;}
    .container p {color: #fff;font-size: 13px;line-height: 25px;}
    .container .title {text-align: left;font-size: 15px;margin: 40px 0 50px 0;}

    .research {padding: 0 100px;}
    .research .researchBox {width: 100%;height: 310px;float: left;}
    .research .researchBox img {float: left;}
    .research .researchBox1 img {width: 230px;height: 196px;}
    .research .researchBox2 img {width: 260px;height: 225px;float: right;}
    .research .researchBox3 img {width: 230px;height: 200px;}
    /*.researchBox1, .researchBox3 {padding-left: 110px;}*/
    /*.researchBox2{padding:0 110px;}*/
    .researchBox .researchCube {height: 100%;width: 490px;float: left;}
    .researchBox1 .researchCube, .researchBox3 .researchCube {margin-left: 110px;}
</style>
